import React, { useState, useEffect, useImperativeHandle } from 'react';
import {
  List,
  InputItem,
  DatePicker,
  TextareaItem,
  Checkbox,
  Button,
  Icon,
} from 'antd-mobile';
import SelfInput from 'components/common/selfInput';
import Cascade from 'components/common/cascade';
import Star from 'components/common/star';
import SelfCheckBox from 'components/common/selfCheckBox';
import ModalCheck from 'components/common/modalCheck';
import companyType from 'dic/companyType';
import { getDicType } from 'ser/actions';

import './index.less';
export default function CompTranCa({ item, cRef }) {
  const [storeCa, setStoreCa] = useState([]);
  const [cwccVisible, setCwccpVisible] = useState(false);
  const [llccVisible, setLlccVisible] = useState(false);
  const [cwccTypeList, setCwccTypeList] = useState([]);
  const [llccTypeList, setLlccTypeList] = useState([]);
  const [cwccStr, setCwccStr] = useState('');
  const [cwccValueStr, setCwccValueStr] = useState('');
  const [llccStr, setLlccStr] = useState('');
  const [llccValueStr, setLlccValueStr] = useState('');
  // 字段
  const [storeCategory, setstoreCategory] = useState('');
  const [storeCategoryCN, setstoreCategoryCN] = useState('');
  const [totalArea, settotalArea] = useState('');
  const [freezeArea, setfreezeArea] = useState('');
  const [coldArea, setcoldArea] = useState('');
  const [atmosphereArea, setatmosphereArea] = useState('');
  useEffect(() => {
    async function fetchData() {
      const dic1 = await getDicType({ value: 'storeCategory' }); // 仓储类别
      const dic2 = await getDicType({ value: 'natStoreType' }); // 常温仓储类型
      const dic3 = await getDicType({ value: 'coldStoreType' }); // 冷链仓储类型
      if (dic1.code === 0) {
        dic1.rows.length && setStoreCa(dic1.rows);
      }
      if (dic2.code === 0) {
        dic2.rows.length && setCwccTypeList(dic2.rows);
      }
      if (dic3.code === 0) {
        dic3.rows.length && setLlccTypeList(dic3.rows);
      }
    }
    fetchData();
  }, []);
  useImperativeHandle(cRef, () => ({
    storeCategory,
    storeCategoryCN,
    natStoreType: cwccValueStr,
    natStoreTypeCN: cwccStr,
    coldStoreType: llccValueStr,
    coldStoreTypeCN: llccStr,
    totalArea,
    freezeArea,
    coldArea,
    atmosphereArea,
  }));
  function handleChange() {}

  // 运输方式的单选按钮
  function handleTransportRadio(val) {
    console.log(val);
  }

  return (
    <>
      <div className="compStyle">
        <div className="title">
          <span>仓储类别（多选）</span>
        </div>
        <div className="radio">
          <SelfCheckBox
            data={storeCa}
            handleChange={handleChange}
            handleChange={(i, v) => {
              setstoreCategory(v + '');
              setstoreCategoryCN(i + '');
            }}
          />
        </div>
      </div>
      <div className="modalCheck" onClick={() => setCwccpVisible(true)}>
        <div>常温仓储类型（多选）</div>
        {cwccStr ? (
          <div>{cwccStr}</div>
        ) : (
          <div>
            <span>请选择</span>
            <Icon type="right" />
          </div>
        )}
      </div>
      <div className="modalCheck" onClick={() => setLlccVisible(true)}>
        <div>冷链仓储类型（多选）</div>
        {llccStr ? (
          <div>{llccStr}</div>
        ) : (
          <div>
            <span>请选择</span>
            <Icon type="right" />
          </div>
        )}
      </div>
      <ModalCheck
        visible={cwccVisible}
        data={cwccTypeList}
        handleModal={(i, v) => {
          setCwccpVisible(false);
          setCwccStr(i);
          setCwccValueStr(v);
        }}
      />
      <ModalCheck
        visible={llccVisible}
        data={llccTypeList}
        handleModal={(i, v) => {
          setLlccVisible(false);
          setLlccStr(i);
          setLlccValueStr(v);
        }}
      />
      <SelfInput
        label="仓库总面积"
        isRequired={true}
        rule={{
          len: 1,
          empty: '请输入仓库总面积',
          error: '请正确输入仓库总面积',
        }}
        type='digit'
        unit="万平方米"
        handleInputChange={v => settotalArea(v)}
      />
      <SelfInput
        label="冷冻库面积"
        isRequired={false}
        rule={{
          len: 1,
          empty: '请输入冷冻库面积',
          error: '请正确输入冷冻库面积',
        }}
        type='digit'
        unit="万平方米"
        handleInputChange={v => setfreezeArea(v)}
      />
      <SelfInput
        label="冷藏库面积"
        isRequired={false}
        rule={{
          len: 1,
          empty: '请输入冷藏库面积',
          error: '请正确输入冷藏库面积',
        }}
        type='digit'
        unit="万平方米"
        handleInputChange={v => setcoldArea(v)}
      />
      <SelfInput
        label="气调库面积"
        isRequired={false}
        rule={{
          len: 1,
          empty: '请输入气调库面积',
          error: '请正确输入气调库面积',
        }}
        type='digit'
        unit="万平方米"
        handleInputChange={v => setatmosphereArea(v)}
      />
    </>
  );
}
